import TitleBar from "../../components/titleBar";
import "./index.css";
import { useState } from "react";
import { Image } from "antd";
import { TableOutlined, FolderFilled } from "@ant-design/icons";
function Tuku() {
  let [nowtype, setnowtype] = useState(0);
  let [nowdate, setnowdate] = useState(0);
  let [typedata, settypedata] = useState([
    { id: 1, icon: TableOutlined },
    { id: 2, icon: TableOutlined },
    { id: 3, icon: TableOutlined },
  ]);
  let [date, setdate] = useState([
    { id: 1, title: "日" },
    { id: 2, title: "周" },
    { id: 3, title: "月" },
    { id: 4, title: "年" },
  ]);
  let [main1data, setmain1data] = useState<any[]>([
    [
      {
        id: 1,
        title: "一点",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 2,
        title: "二点",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 3,
        title: "三点",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 4,
        title: "四点",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 5,
        title: "五点",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 6,
        title: "六点",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
    ],
    [
      {
        id: 1,
        title: "周一",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 2,
        title: "周二",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 3,
        title: "周三",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 4,
        title: "周四",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 5,
        title: "周五",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 6,
        title: "周六",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 7,
        title: "周日",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
    ],
    [
      {
        id: 1,
        title: "一月",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 2,
        title: "二月",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 3,
        title: "三月",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 4,
        title: "四月",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 5,
        title: "五月",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 6,
        title: "六月",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
    ],
    [
      {
        id: 1,
        title: "前年",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 2,
        title: "去年",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 3,
        title: "今年",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
      {
        id: 4,
        title: "明年",
        srcLs: [
          "/public/img/a (1).jpg",
          "/public/img/a (2).jpg",
          "/public/img/a (3).jpg",
          "/public/img/a (4).jpg",
        ],
      },
    ],
  ]);
  function changetype(index: number) {
    setnowtype(index);
  }
  function changedate(index: number) {
    setnowdate(index);
  }
  return (
    <div className="tuku">
      <TitleBar
        title="图库"
        Icon={null}
        callback={() => console.log(1)}
      ></TitleBar>
      <div className="tukumain">
        <div className="tukutitle">
          <FolderFilled className="tukuicon1" />
          <div className="tukutitleLs">
            {typedata.map((item: any, index: number) => {
              return (
                <item.icon
                  key={item.id}
                  onClick={() => changetype(index)}
                  className="tukuicon2"
                  style={index === nowtype ? { color: "#1f8efa" } : {}}
                />
              );
            })}
          </div>
          <div>
            {date.map((item: any, index: number) => {
              return (
                <span
                  key={item.id}
                  onClick={() => changedate(index)}
                  className={index === nowdate ? "tukudateac" : ""}
                  style={{ display: "inline-block", padding: "3px 25px" }}
                >
                  {item.title}
                </span>
              );
            })}
          </div>
        </div>
        {nowtype === 0 && (
          <div className="tukumain1">
            {main1data[nowdate].map((item: any, index: number) => {
              return (
                <div className="main1item" key={item.id}>
                  <div className="main1title">
                    <div className="main1titlemain">{item.title}</div>
                    <div className="more" style={{ color: "#1f8efa" }}>
                      查看更多
                    </div>
                  </div>

                  <div className="imgLs">
                    {item.srcLs.map((i: any, index: number) => {
                      return (
                        <Image
                          className="imgitem"
                          key={i}
                          style={{
                            borderRadius: "10px",
                            margin: "10px 0",
                            overflow: "hidden",
                          }}
                          width="24%"
                          src={i}
                        />
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </div>
        )}
        {nowtype === 1 && (
          <div className="tukumain2">
            {main1data[nowdate].map((item: any, index: number) => {
              return (
                <div className="main2item">
                    <FolderFilled  className="main2itemicon"/>
                    <span>{item.title}</span>
                    <span>32mb</span>
                    <span>上次打开2023/8/24 23:01:53</span>
                    <div  className="main2itemls">
                        <span>查看更多</span>
                        <span>&gt;</span>
                    </div>
                </div>
              )
            })}
          </div>
        )}
        {nowtype === 2 && <div className="tukumain3">第三种</div>}
      </div>
    </div>
  );
}

export default Tuku;
